<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管路员界面</title>


    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
    <div class="container">
        <!-- 页头部分 -->
        <div class="row clearfix">
            <div class="col-md-12 column">
                <!-- 页头栏目 -->
                <div class="row clearfix">
                    <div class="col-md-12 column">
                        <nav class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
                            <div class="navbar-header">
                                <button type="button" class="navbar-toggle" data-toggle="collapse"
                                    data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle
                                        navigation</span><span class="icon-bar"></span><span
                                        class="icon-bar"></span><span class="icon-bar"></span></button> <a
                                    class="navbar-brand"
                                    href="http://localhost:8080/graduationproject/admin/index">管理员系统</a>
                            </div>

                            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                                <ul class="nav navbar-nav">
                                    <li>
                                        <a>信息管理</a>
                                    </li>
                                    <li>
                                        <a id="teacher">教师管理</a>
                                    </li>
                                    <li>
                                        <a id="student">学生管理</a>
                                    </li>
                                </ul>
                                <form class="navbar-form navbar-left" role="search">
                                    <div class="form-group">
                                        <input type="text" class="form-control" id="msgsearch" />
                                    </div> <button type="submit" class="btn btn-default">信息搜索</button>
                                </form>
                                <ul class="nav navbar-nav navbar-right" style="padding-right: 10px;">
                                    <li class="dropdown">
                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">关于本系统<strong
                                                class="caret"></strong></a>
                                        <ul class="dropdown-menu">
                                            <li>
                                                <a href="#">系统文献</a>
                                            </li>
                                            <li>
                                                <a href="#">系统日志</a>
                                            </li>
                                            <li>
                                                <a href="#">健康检查</a>
                                            </li>
                                            <li class="divider">
                                            </li>
                                            <li>
                                                <a href="#">作者页面</a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>

                        </nav>
                    </div>
                </div>
                <!-- 标题栏目 -->
                <div class="row clearfix" style="margin-top: 5%;">
                    <div class="col-md-12 column">
                        <div class="page-header">
                            <h1>
                                修正信息 <small>管理员系统</small>
                            </h1>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 内容部分 -->
        <div class="row clearfix">
            <div class="col-md-12 column">
                <div class="row clearfix">
                    <div class="col-md-2 column">
                        <h3 class="text-error">
                            信息管理
                        </h3>
                    </div>
                    <div class="col-md-6 column">

                    </div>
                    <div class="col-md-4 column">
                    </div>
                </div>
                <div class="row clearfix">
                    <div class="col-md-12 column" id="show">



                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="http://code.jquery.com/jquery-latest.js"></script>

<!--
    定义展示的DIV

-->
<script>

    // 在id为show中的div进行展示
    var $show = $('#show');

    // 在页面加载时进行新建表格和加载数据
    $(function () {
        getMsg();
    });
</script>

<!-- Msg展示数据 -->
<script>

    // 获取msg
    function getMsg() {
        $.ajax({
            type: "GET",
            url: "getMsgs",
            dataType: "JSON",
            success: function (msgs) {
                console.log(msgs);
                showMsg(msgs);
            },
            error: function (error) {
                console.log(error);
            }
        });
    }

    // 展示Msg
    function showMsg(msgs) {
        let $thead = "<th>编号</th>" +
            "<th>标题</th>" +
            "<th>教师姓名</th>" +
            "<th>学生姓名</th>" +
            "<th>内容</th>" +
            "<th>是否已经处理</th>" +
            "<th>处理</th>" +
            "<th>操作</th>";

        let $tbody = $('<tbody></tbody>');

        $.each(msgs, function (index, value) {
            console.log(value);
            let tr = $('<tr></tr>');
            tr.append('<td>' + value.id + '</td>');
            tr.append('<td>' + value.title + '</td>');
            tr.append('<td>' + value.teacherName + '</td>');
            tr.append('<td>' + value.studentName + '</td>');
            tr.append('<td>' + value.msg + '</td>');
            tr.append('<td>' + (value.solved == 1 ? '已处理' : '未处理') + '</td>');
            // 处理按钮
            if (!value.status) {
                tr.append('<td><button class="btn btn-primary" onclick="processMsg(' + value.id + ')">处理</button></td>');
            } else {
                tr.append('<td></td>');
            }
            // 删除按钮
            tr.append('<td><button class="btn btn-danger" onclick="deleteMsg(' + value.id + ')">删除</button></td>');

            $tbody.append(tr);
        });
        // 清空show中的元素
        createTable($show, $thead, $tbody);
    }


    // 删除Msg
    function deleteMsg(id) {
        console.log(id);
        $.ajax({
            type: "GET",
            url: "deleteMsg",
            data: {
                'id': id
            },
            dataType: "JSON",
            success: function (msgs) {
                getMsg();
            },
            error: function (error) {
                console.log(error);
            }
        });


    }




</script>

<!--
    教师信息展示

-->
<script>

    /* 对id=teacher的标签添加一个事件绑定 */
    var $teacher = $('#teacher');
    $teacher.click(function () {

        // 清空表格
        $show.empty();


        // 获取和展示teacher
        getTeachers()

    });

    // 获取teacher的值
    function getTeachers() {
        $.ajax({
            type: "GET",
            url: "getTeacher",
            dataType: "JSON",
            success: function (teachers) {
                console.log(teachers);
                showTeacher(teachers);
            },
            error: function (error) {
                console.log(error);
            }
        });
    }
    // 展示teacher
    function showTeacher(teachers) {
        let $thead = "<th>编号</th>" +

            "<th>姓名</th>" +
            "<th>年龄</th>" +
            "<th>性别</th>" +
            "<th>等级</th>" +
            "<th>是否被删除</th>" +
            "<th>修改信息</th>" +
            "<th>操作</th>";

        let $tbody = $('<tbody></tbody>');

        $.each(teachers, function (index, teacher) {
            console.log(teacher);
            let tr = $('<tr></tr>');
            tr.append('<td>' + teacher.id + '</td>');
            tr.append('<td>' + teacher.name + '</td>');
            tr.append('<td>' + teacher.age + '</td>');
            tr.append('<td>' + teacher.sex + '</td>');
            tr.append('<td>' + teacher.category + '</td>');
            tr.append('<td>' + (teacher.isdelete == 1 ? '已删除' : '未删除') + '</td>');
            // 处理按钮
            if (!teacher.status) {
                tr.append('<td><button class="btn btn-primary" onclick="updateTeacher(' + teacher.id + ')">修改</button></td>');
            } else {
                tr.append('<td></td>');
            }
            // 删除按钮
            tr.append('<td><button class="btn btn-danger" onclick="deleteTeacher(' + teacher.id + ')">删除</button></td>');

            $tbody.append(tr);
        });
        // 清空show中的元素
        createTable($show, $thead, $tbody);
    }
    // 删除teacher
    function deleteTeacher(id) {
        $.ajax({
            type: "GET",
            url: "deleteTeacher",
            data: {
                'id': id
            },
            dataType: "JSON",
            success: function () {
                getTeachers();
            },
            error: function (error) {
                console.log(error);
            }
        });
    }

</script>

<script>
    /* 对id=student的标签添加一个事件绑定 */
    var $student = $('#student');
    $student.click(function () {

        // 清空表格
        $show.empty();

        // 获取和展示teacher
        getStudents();

    });

    // 获取学生信息
    function getStudents() {
        $.ajax({
            type: "GET",
            url: "getStudents",
            dataType: "JSON",
            success: function (students) {
                console.log(students);
                showStudents(students);
            },
            error: function (error) {
                console.log(error);
            }
        });
    }

    function showStudents(students) {
        let $thead = 
            "<th>编号</th>" +
            "<th>姓名</th>" +
            "<th>年龄</th>" +
            "<th>性别</th>" +
            "<th>培养等级</th>" +
            "<th>入学时间</th>" +
            "<th>毕业时间</th>" +
            "<th>班级</th>" +
            "<th>是否删除</th>" +
            "<th>修改信息</th>" +
            "<th>操作</th>";

        let $tbody = $('<tbody></tbody>');

        $.each(students, function (index, student) {
            console.log(students);
            let tr = $('<tr></tr>');
            tr.append('<td>' + student.id + '</td>');
            tr.append('<td>' + student.name + '</td>');
            tr.append('<td>' + student.age + '</td>');
            tr.append('<td>' + student.sex + '</td>');
            tr.append('<td>' + student.category + '</td>');
            tr.append('<td>' + student.enrollmenttime + '</td>');
            tr.append('<td>' + student.graduationtime + '</td>');
            tr.append('<td>' + student.course + '</td>');
            tr.append('<td>' + (student.isdelete == 1 ? '已删除' : '未删除') + '</td>');
            // 处理按钮
            if (!student.status) {
                tr.append('<td><button class="btn btn-primary" onclick="processMsg(' + student.id + ')">处理</button></td>');
            } else {
                tr.append('<td></td>');
            }
            // 删除按钮
            tr.append('<td><button class="btn btn-danger" onclick="deleteMsg(' + student.id + ')">删除</button></td>');

            $tbody.append(tr);
        });
        // 清空show中的元素
        createTable($show, $thead, $tbody);
    }


</script>


<script>


    // 创建表格
    function createTable($show, $thead, $tbody) {
        $show.empty();

        // 创建这个表格
        let $table = $("<table class=\"table table-hover table-bordered\"> </table>");

        // 将thead加入到表格中
        let thead = $("<thead></thead>");

        thead.append($('<tr></tr>').html($thead));

        $table.append(thead);

        // 将tbody添加到表格中
        let tbody = $("<tbody></tbody>");
        tbody.append($thead);

        $table.append($tbody);

        // 将表格放置到show中
        $show.append($table);
    }

</script>

</html>